<template>
  <section class="pageMain">
    <img class="headImg" :src="imgss[0].image" alt="">
    <div class="showTitle">
      <img class="titleBack" src="@/assets/titleBack.png" alt="">
      <div class="mainTitle">ABOUT US</div>
      <div class="subTitle">{{ $t('about.title') }}</div>
    </div>


    <div class="introduce">
      <div class="items">
        <div class="introduce_item" v-for="(item,index) in info">
          <template v-if="((index + 1) % 2) != 0">
            <div class="right desc" >
              <div class="header">
                <img src="@/assets/home/desc_icon.png"/>
                <span>{{ item.title }}</span>
              </div>
              <div class="dcontent">
                {{ item.description }}
              </div>
            </div>
            <div class="null"></div>
            <div class="left">
              <v-img
                  contain
                  width="550"
                  height="350"
                  :src="item.image"
              ></v-img>
            </div>
          </template>
          <template v-else>
            <div class="left">
              <v-img
                  contain
                  width="550"
                  height="350"
                  :src="item.image"
              ></v-img>
            </div>

            <div class="null"></div>
            <div class="right desc">
              <div class="header">
                <img src="@/assets/home/desc_icon.png"/>
                <span>{{ item.title  }}</span>
              </div>
              <div class="dcontent">
               {{ item.description }}
              </div>
            </div>
          </template>
        </div>
      </div>

    </div>

    <div class="advantage">
      <div class="title">
        <div>
          {{ $t('home.advantage.title') }}
        </div>
        <div>
          ADVANTAGE
        </div>
      </div>
      <div class="list">
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage1.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l1') }}</span>
        </div>
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage2.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l2') }}</span>
        </div>
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage3.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l3') }}</span>
        </div>
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage4.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l4') }}</span>
        </div>
      </div>
    </div>

    <div class="introduce">
      <div class="items">
        <div class="introduce_item" v-for="(item,index) in honor">
          <template v-if="((index + 1) % 2) != 0">
            <div class="right desc" >
              <div class="header">
                <img src="@/assets/home/desc_icon.png"/>
                <span>{{ item.title }}</span>
              </div>
              <div class="dcontent">
                {{ item.description }}
              </div>
            </div>
            <div class="null"></div>
            <div class="left">
              <v-img
                  contain
                  width="550"
                  height="350"
                  :src="item.image"
              ></v-img>
            </div>
          </template>
          <template v-else>
            <div class="left">
              <v-img
                  contain
                  width="550"
                  height="350"
                  :src="item.image"
              ></v-img>
            </div>

            <div class="null"></div>
            <div class="right desc">
              <div class="header">
                <img src="@/assets/home/desc_icon.png"/>
                <span>{{ item.title  }}</span>
              </div>
              <div class="dcontent">
                {{ item.description }}
              </div>
            </div>
          </template>
        </div>
      </div>

    </div>

  </section>

</template>

<script>
import {getContent} from "@/api/new";

export default {
  name: "productClass",
  data: () => ({
    info:[],
    honor:[],
    image:''
  }),
  computed:{
    imgss(){
      return this.$store.state.storeThereNavList.filter(item => item.mid == 9)
    }
  },
  created() {
    let arr = this.$store.state.storeThereNavList
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].mid == 9) {
        this.image = arr[i].image
        break;
      }
    }
    getContent({
      mid: 9
    }).then(res => {
      this.info = res.data
    }).catch(err => {

    })
    getContent({
      mid: 13
    }).then(res => {
      this.honor = res.data
    }).catch(err => {

    })
  }
}
</script>


<style scoped lang="less">
.pageMain {

  .headImg {
    width: 100%;
    height: 300px;
  }

  .showTitle {
    padding: 60px;
    box-sizing: content-box;
    position: relative;
    text-align: center;
    height: 126px;
    .titleBack {
      position: absolute;
      left: calc((100% - 30px) / 2);
      width: 30px;
      height: 127px;
    }

    .mainTitle {
      font-weight: 800;
      font-size: 36px;
      color: #333333;
      margin-top: 25px;
    }

    .subTitle {
      color: #00A3E6;
      font-size: 18px;
    }
  }

  .desc {
    width: 100%;

    .header {
      display: flex;
      //justify-content: left;
      font-size: 24px;
      color: #333333;
      height: 40px;
      margin-bottom: 50px;
      image{
        width: 40px;
        height: 40px;
      }
      span {
        margin-left: 15px;
        line-height: 40px;
      }
    }

    .dcontent {
      font-size: 14px;
      color: #666666;
      line-height: 30px;
      max-height: 260px;
    }

  }


  .introduce {
    //height: 1244px;
    //position: relative;
    //margin-top: 100px;
    margin-bottom: 50px;
    .intr_header {
      width: 100%;
      height: 280px;
      background-color: #F6F6F6;
    }

    .introduce_item {
      //position: absolute;
      //margin: 0 auto;
      margin-top: 50px;
      display: flex;
      width: 1200px;
      height: 350px;
      align-items: center;

      .left .right {
        width: 550px;
      }

      .null {
        width: 100px;
      }
    }


    .items {
     width: 1200px;
      margin: 0 auto;
    }
  }

  .advantage {
    display: flex;
    width: 100%;

    .title {
      background-color: #00A3E6;
      width: 612px;
      height: 250px;
      display: flex;
      align-content: center;
      flex-wrap: wrap;

      div {
        width: 100%;
        text-align: right;
        padding-right: 52px;
        color: #FFFFFF;
      }

      div:nth-child(1) {
        font-weight: bold;
        font-size: 28px;
        padding-right: 88px;
      }

      div:nth-child(2) {
        font-size: 78px;
        color: rgba(255, 255, 255, 0.2);
      }
    }

    .list {
      display: flex;
      align-items: center;
      width: calc(100% - 612px);
      height: 250px;
      background-image: url("@/assets/home/advantageBack.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding-left: 70px;

      .l_item {
        width: 180px;
        margin: 0 35px;
        //text-align: center;
        color: #FFFFFF;
        font-size: 16px;
      }
    }
  }
}



</style>